<template>
    <div class="form-list">
       <v-form-designer ref="vformDesign">
           <template v-slot:toolbar>
               <el-button type="text" @click="save"><i class="el-icon-edit-outline" />保存</el-button>
           </template>
       </v-form-designer>
    </div>
</template>
<script>
import { default as apiList } from '@/apis/list';
export default {
    name: 'form-list',
    data() {
        return {
            pageSize:5,
            pageNum:1,
            list: [
                {
                    data: '2022-02-02',
                    name: '',
                    address: '',
                },
            ],
        };
    },
    created() {
    },
    methods: {
        ...apiList,
        save:function(){
            let formConfig=this.$refs.vformDesign.getFormJson(true);
            this.saveConfig(formConfig).then(res=>{
                if(res.success){
                    this.$message.success("保存成功");
                    setTimeout(()=>{
                        this.$router.go(-1);
                    },2000);
                }
            })
        }
    },
};
</script>
<style scoped lang="scss">
.form-list {
    width: 100%;
    height: 100%;

    $topHeight: 80px; //修改标题栏高度
    $footHeight: 50px; //修改底部栏高度

    &-header {
        height: $topHeight;
        width: 100%;
        padding: 0px 20px;
        box-sizing: border-box;
        border-bottom: 2px dashed #cccccc;

        div {
            height: $topHeight;
            line-height: $topHeight;
            vertical-align: middle;
        }
        &-title {
            margin-right: 200px;
            display: block;
            text-align: left;
            font: {
                size: 20px;
                weight: bold;
            }
            color: #409eff;
        }
        &-actions {
            width: 200px;
            text-align: right;
            float: right;
        }
    }
    &-table {
        height: calc(100vh - $topHeight - $footHeight);
        padding: 10px 20px;
        box-sizing: border-box;
    }
    &-pager {
        height: $footHeight;
        line-height: $footHeight;
    }
}
</style>